<template>
	<div class="CommoditDisplay">
			<div v-for="(item,index) in this.$props.images" :key="item" class="list">
					<img :src="item" />
			</div>
			<div class="info">
				<span class="overflow">
					商品名:
					{{this.$props.title}}<br>
				</span>
				<span class="overflow">
					价格:
					{{this.$props.price}}
					<span>&#165;</span>
					<br>
				</span>
				<span class="overflow">
					类别:
				{{this.$props.genre}}
				</span>
				<el-row>
					<el-button type="primary" @click='edit' :icon="Edit">
						编辑
					</el-button>
					<el-button type="danger" @click="drop" :icon="Delete">
						下架商品
					</el-button>
				</el-row>
			</div>
	</div>
</template>

<script>
	// Commodity display
	import { Edit } from '@element-plus/icons-vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import {defineComponent,inject,ref} from 'vue';
	export default defineComponent({
		props:{
			genre:String,
			title:String,
			price:Number,
			images:Array,
			sum:Number,
			index:Number
		},
		setup(props,context){
			function edit(){
				context.emit('Edit',{
					genre:props.genre,
					title:props.title,
					price:props.price,
					images:props.images,
					sum:props.sum,
					index:props.index
				})
			}
			function drop(){
				 ElMessageBox.confirm(
				    '你确定要下架此商品吗?',
				    '下架商品',
				    {
				      confirmButtonText: '确定',
				      cancelButtonText: '取消',
				      type: 'info',
				    }
				  )
				    .then(() => {
							context.emit('Drop',{
								index:props.index
							});
				    })
				    .catch(() => {
				      ElMessage({
				        type: 'info',
				        message: 'Delete canceled',
				      })
				    })
			}
			return {
				edit,
				drop,
				Edit
			}
		}
	})
</script>

<style scoped="scoped">
	.CommoditDisplay{
		width: 100%;
		height: 100%;
		overflow: hidden;
		border:1px solid #949393;
		box-shadow: 0 0 28px #504d4d;
	}
	.list{
		margin-top: 7px;
		display: flex;
		justify-content: center;
	}
	.list img{
		width: 90%;
		height: 200px;
		border-radius: 10px;
	}
	.info{
		color: #5d6366;
		font-weight: bold;
		font-size: .8em;
		padding: 10px;
	}
	.overflow{
		display: inline-block;
		width:100%;
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.el-message-box{
		max-width: 90vw;
	}
</style>
